<template>
    <el-card>
        <div slot="header">
            <span>账号列表</span>
        </div>

        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
            <!-- 复选框 -->
            <el-table-column type="selection" width="55"></el-table-column>

            <!-- 账号 -->
            <el-table-column label="账号" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.account }}</span>
                </template>
            </el-table-column>

            <!-- 用户组 -->
            <el-table-column label="用户组" width="100" prop="userGroup"></el-table-column>

            <!-- 创建时间 -->
            <el-table-column label="创建时间" width="120">
                <template slot-scope="scope">
                    <span>{{ scope.row.ctime | formater }}</span>
                </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--
          分页
          属性：
            @size-change="sizeChange"  每页显示条数改变时触发
            @current-change="currentPage"  当前页码改变时触发
            :current-page="page"  当前在第几页上
            :page-sizes="[3, 10, 20, 40]"  每页显示多少条的选项
            :page-size="pageSize"  每页显示多少条
            layout="total, sizes, prev, pager, next, jumper"  页码栏的布局
            :total="400"  数据的总条数
        -->
        <el-pagination @size-change="sizeChange" @current-change="currentPage" :current-page="page"
            :page-sizes="[3, 10, 20, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-card>
</template>

<script>
    import { userList } from '@/api/user.js'

    export default {
        data() {
            return {
                tableData: [],
                pageSize: 3, //每页显示多少条
                page: 1, //当前在第几页上
                total: 0, //数据总条数
            }
        },
        created() {
            this.getData();
        },

        methods: {
            //修改事件
            edit(row) {
                console.log(row);
            },

            //删除事件
            del(row) {
                console.log(row);
            },

            //每页显示条数改变时触发
            sizeChange(val) {
                this.pageSize = val;
                this.getData();
            },

            //当前页码改变时触发
            currentPage(val) {
                this.page = val;
                this.getData();
            },

            //获取数据，渲染到页面上
            async getData() {
                //读取用户列表数据
                let res = await userList({ currentPage: this.page, pageSize: this.pageSize });
                this.tableData = res.data.data; //渲染表格

                //分页
                this.total = res.data.total;
            }
        },

        filters: {
            //日期过滤器
            formater(d) {
                let d1 = new Date(d);
                return d1.getFullYear() + '/' + (d1.getMonth() + 1) + '/' + d1.getDate();
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-pagination {
        margin-top: 20px;
    }
</style>